import 'zone.js';
import 'reflect-metadata';
import { Component, enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ViserModule } from 'viser-ng';
const DataSet = require('@antv/data-set');

const values = [
  1.2, 3.4, 3.7, 4.3, 5.2, 5.8, 6.1, 6.5, 6.8, 7.1, 7.3, 7.7,
  8.3, 8.6, 8.8, 9.1, 9.2, 9.4, 9.5, 9.7, 10.5, 10.7, 10.8, 11.0,
  11.0, 11.1, 11.2, 11.3, 11.4, 11.4, 11.7, 12.0, 12.9, 12.9,
  13.3, 13.7, 13.8, 13.9, 14.0, 14.2, 14.5, 15, 15.2, 15.6, 16.0,
  16.3, 17.3, 17.5, 17.9, 18.0, 18.0, 20.6, 21, 23.4
];
const sourceData = values.map((value) => ({ value }));

const dv = new DataSet.View().source(sourceData);
dv.transform({
  type: 'bin.histogram',
  field: 'value',
  binWidth: 2,
  as: ['value', 'count'],
});
const data = dv.rows;

const scale = [{
  dataKey: 'value',
  nice: false,
  min: 0,
  tickInterval: 1,
}, {
  dataKey: 'count',
  max: 14,
}];

const formatter = val => {
  if ((val % 2)) {
    return val;
  }
  return '';
};

@Component({
  selector: '#mount',
  template: `
  <div>
    <v-chart [forceFit]="forceFit" [height]="height" [data]="data" [scale]="scale">
      <v-tooltip [crosshairs]="false" [inPlot]="false" position="top"></v-tooltip>
      <v-axis dataKey="value" [label]="label"></v-axis>
      <v-bar position="value*count"></v-bar>
    </v-chart>
  </div>
  `
})
class AppComponent {
  forceFit: boolean = true;
  height: number = 400;
  scale = scale;
  data = data;
  label = { formatter: formatter };
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ViserModule
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})
export default class AppModule { }

